<template>
    <el-form ref="form" :rules="rules" :model="student"  label-width="70px" style="width: 500px">
    <el-form-item label="邮箱"  prop="email">
        <el-input v-model="student.email"></el-input>
    </el-form-item>
    <el-form-item label="新密码"  prop="password">
        <el-input  v-model="student.password" ></el-input>
    </el-form-item>
     <!-- 验证码 -->
      <el-form-item prop="verifycode">
        <!-- 注意：prop与input绑定的值一定要一致，否则验证规则中的value会报undefined，因为value即为绑定的input输入值 -->
        <el-input v-model="student.verifycode" placeholder="请输入验证码" class="identifyinput"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="identifybox" style="text-align:left">
          <div @click="refreshCode">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
          <el-button @click="refreshCode" type='text'  class="textbtn">看不清，换一张</el-button>
        </div>
      </el-form-item>
    <el-form-item  ><br>
      <el-button type="primary" @click="alter">修改信息</el-button>
    </el-form-item>

      
    </el-form>
    
</template>

<script>

import {alterpassword} from '@/api/modules/user'
import {getCookie} from '@/libs/cookie'
import SIdentify from '@/components/identify'

export default {
    name:'student_infor',
    components:{SIdentify},
    data(){
                // 验证码自定义验证规则
        const validateVerifycode = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入验证码'))
        } else if (value !== this.identifyCode) {
            console.log('validateVerifycode:', value)
            callback(new Error('验证码不正确!'))
        } else {
            callback()
        }
        };
        return{
            identifyCodes: "1234567890abcdefghijklmnopqrstuvwxyz",
           identifyCode: "",
           message:{
               msg:'验证码错误',
               msg1:'信息错误，修改失败'
           },
            student:{
                id:'',
                password:'',
                email:'',
                role:'',
                verifycode:''
            },
             rules:{
                password:{required: true, message: "新密码不能为空", trigger: "blur"},
                verifycode: { required: true, trigger: 'blur', validator: validateVerifycode }
                
            }
        }
    },
    mounted(){
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
        let user = JSON.parse(getCookie("user") || '{}');
        this.student.id = user.id
        this.student.role = user.role
        console.log(user)
    },
    methods:{
      alter(filter){
          filter = {
              ...filter,
              ...this.student
          }
          console.log("111111")
          console.log(this.student.verifycode)
          console.log(this.identifyCode)

          if(this.student.verifycode === this.identifyCode) 
          {
          alterpassword(filter).then( res =>{
               this.toast(res.message)
          }).catch(data =>{
                        this.toast(this.message.msg1,11)
            }) 
            }
            else this.toast(this.message.msg,11)
            
      },    

      // 验证码
      randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
      for (let i = 0; i < l; i++) 
      { this.identifyCode +=this.identifyCodes[ this.randomNum(0, this.identifyCodes.length)]; 
      } 
        console.log(this.identifyCode);
       } ,
        
    }
}
</script>

